//ts-ignore
import React, { useEffect, useRef, useContext } from "react";
import supGptCodePlugin from "./plugin";
import { full as emoji } from "markdown-it-emoji";

const hljs = require("highlight.js");
const md = require("markdown-it")({
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str: string, lang: string) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return (
          '<pre class="hljs"><code>' +
          hljs.highlight(lang, str, true).value +
          "</code></pre>"
        );
      } catch (__) {}
    }

    return (
      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
    );
  },
});
md.use(supGptCodePlugin);
md.use(emoji);
interface IProps {
  loading?: any;
  thinks: any[];
  onRender?: (isForce?: boolean) => void;
}

const ChatThink: React.FC<IProps> = ({ thinks, onRender, loading }) => {
  const thinkRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let mdStr = "";
    for (let i = 0; i < thinks.length; i++) {
      mdStr += thinks[i].leftContent || "";
    }
    const result = md.render(mdStr);
    if (thinkRef.current) {
      thinkRef.current.innerHTML = result;
    }
    onRender && onRender();
  }, [thinks]);
  useEffect(() => {
    let rightMdStr = "";
    for (let i = 0; i < thinks.length; i++) {
      rightMdStr += thinks[i].rightContent || "";
    }
    const thinkLen = thinks.length;
    const lastThink = thinks[thinkLen - 1];
    // console.log('lastThink::___________', loading, lastThink)
  }, [thinks, loading]);
  return (
    <div
      ref={thinkRef}
      className={`chat-think markdown-body ${thinks.length > 0 ? "chat-think-fill" : ""}`}
    ></div>
  );
};

export default ChatThink;
